{extend name="common" /}

{block name="content"}
<link rel="stylesheet" href="__css__/chatlog.css">

<div id="app" v-cloak>
  <div class="container">
    <div class="layim-chat-main">
      <block v-if="list.length">
        <ul>
          <block v-for="(item,index) in list" :key="index">
            <li class="layim-chat-mine" v-if="item.id == mineId">
              <div class="layim-chat-user">
                <img :src="item.avatar" alt="头像">
                <cite><i>{{ item.timestamp|formatDate }}</i>{{ item.username }}</cite>
              </div>
              <div class="layim-chat-text">{{ item.content|formatContent }}</div>
            </li>
            <li v-else>
              <div class="layim-chat-user">
                <img :src="item.avatar" alt="头像">
                <cite>{{ item.username }}<i>{{ item.timestamp|formatDate}}</i></cite>
              </div>
              <div class="layim-chat-text">{{ item.content|formatContent }}</div>
            </li>
          </block>
        </ul>
      </block>
      <block v-else>
        <p class="tips">啊哦没有更多了 o(╥﹏╥)o</p>
      </block>
    </div>
    <!-- 分页 -->
    <div id="page" v-show="list.length"></div>
  </div>
</div>
{/block}

{block name="js"}
<script src="__js__/vue.min.js"></script>
<script>
    layui.use(['layim', 'laypage', 'toolkit'], function () {
        var toolkit = layui.toolkit,
            laypage = layui.laypage;

        var app = new Vue({
            el: '#app',
            mounted() {
                this.search = {...this.search, ...this.parseQueryString(window.location.search)};
                this.getList();
            },
            data: {
                search: {
                    page: 1,
                    limit: 10
                },
                list: [],
                mineId: parent.layui.layim.cache().mine.id //我的id
            },
            methods: {
                getList() {
                    var _this = this;
                    toolkit.request.get({
                        url: '/chat/chatlog',
                        data: _this.search
                    }, function (res) {
                        _this.list = res.data.list;
                        laypage.render({
                            elem: 'page',  //注意，这里的 test1 是 ID，不用加 # 号
                            count: res.data.count, //数据总数，从服务端得到
                            curr: _this.search.page,//起始页
                            limit: _this.search.limit,//每页显示的条数
                            limits: [10, 20, 30, 40, 50],
                            layout: ['prev', 'page', 'next', 'count', 'limit'],//'prev', 'page', 'next', 'count', 'limit', 'skip', 'refresh'
                            jump: function (obj, first) {
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                //首次不执行
                                if (!first) {
                                    _this.search.page = obj.curr;
                                    _this.getList();
                                }
                            }
                        });
                    })
                },
                // 解析url
                parseQueryString(url) {
                    let tempArr = url.slice(url.indexOf('?') + 1).split('&')
                    let obj = {}
                    tempArr.forEach(item => {
                        let arr = item.split('=')
                        obj[arr[0]] = arr[1]
                    });
                    return obj;
                }
            },
            filters: {
                //格式化时间
                formatDate(timestamp) {
                    return layui.data.date(timestamp);
                },
                //格式化内容
                formatContent(content) {
                    return layui.layim.content(content);
                }
            }
        });
    });
</script>
{/block}
